<template>
  <!--数据字典-->
  <div>
    <el-row class="table-head">
      <!--表头-->
      <a href="#" class="goods-title">数据字典</a>
    </el-row>
    <el-row class="search-box">
      <!--搜索框-->
      搜索关键字
      <el-input placeholder="请输入关键字进行查询" v-model="data.query.descs"
                style="width: 250px ; margin-left: 30px ; margin-right: 40px;">
      </el-input>
      <el-button type="warning" style="width: 120px" @click="btnQueryClick">
        <el-icon>
          <Search/>
        </el-icon>
        搜索
      </el-button>
    </el-row>
    <el-button-group class="button-group">
      <el-button type="primary" @click="intoInsertClick">
        <el-icon><CirclePlus /></el-icon>&nbsp;
        添加
      </el-button>
      <el-button type="warning">
        <el-icon><Bottom /></el-icon>&nbsp;
        导入
      </el-button>
      <el-button type="danger">
        <el-icon><Upload /></el-icon>&nbsp;
        导出
      </el-button>
      <el-button type="info">
        <el-icon><Printer /></el-icon>&nbsp;
        打印
      </el-button>
    </el-button-group>
    <el-row class="table-box">
      <!--列表-->
      <el-table :data="data.list" border stripe class="table-list">
        <el-table-column label="编号" prop="dictId"></el-table-column>
        <el-table-column label="名称" prop="descs"></el-table-column>
        <el-table-column label="所属ID" prop="superId"></el-table-column>
        <el-table-column label="操作" width="300px">
          <template #default="scope">
            <el-button type="success" @click="btnUpdateListClick(scope.row)"
                       style="width: 80px">
              <el-icon><Edit /></el-icon>&nbsp;
              修改
            </el-button>

            <el-button type="primary" @click="btnDeleteListClick(scope.row)"
                       style="width: 80px">
              <el-icon><Delete /></el-icon>&nbsp;
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 100%; display: flex;justify-content: right">
        <el-pagination background layout="prev, pager, next"
                       style="margin-right: 10px"
                       @current-change="currentChange"
                       v-model:page-size="data.query.page.pageSize"
                       v-model:current-page="data.query.page.current"
                       v-model:total="data.query.page.total"
        />
      </el-row>

    </el-row>

    <!--修改信息-->
    <el-dialog
        v-model="data.dialogVisible"
        title="修改信息"
        width="400"
    >
      <el-form :label-width="'80px'">
        <el-form-item label="订单ID">
          <el-input v-model="data.update.dictId" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="data.update.descs"></el-input>
        </el-form-item>
        <el-form-item label="所属ID">
          <el-input v-model="data.update.superId"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="confirmUpdate">确认</el-button>
        <el-button @click="data.dialogVisible = false">取消</el-button>
      </template>
    </el-dialog>

    <!--插入信息-->
    <el-dialog
        v-model="data.dialogVisibleInsert"
        title="添加数据字典信息"
        width="400"
    >
      <el-form :label-width="'100px'">
        <el-form-item label="字典ID">
          <el-input v-model="data.insert.dictId"></el-input>
        </el-form-item>
        <el-form-item label="字典名称">
          <el-input v-model="data.insert.descs"></el-input>
        </el-form-item>
        <el-form-item label="上级ID">
          <el-input v-model="data.insert.superId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="confirmInsert">确认</el-button>
          <el-button @click="data.dialogVisibleInsert">取消</el-button>
        </el-form-item>
      </el-form>


    </el-dialog>


  </div>
</template>

<script lang="ts" setup>

import {onMounted, reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";


const data = reactive({
  list: [],
  query: {
    descs: '',
    page: {
      pageSize: 6,
      current: 1,
      total: 0,
    },
    dictId: '',//删除列表所在行的ID
  },
  update: {
    dictId: '',
    descs: '',
    superId: '',
  },
  insert: {
    dictId: '',
    descs: '',
    superId: '',
  },
  dialogVisible: false,
  dialogVisibleInsert: false,
})

function IntoAll() { //显示全部列表
  axios({
    url: 'http://localhost:8080/dict/list',
    method: 'get',
    params: {
      descs: data.query.descs,
      pageSize: data.query.page.pageSize,
      current: data.query.page.current,
    }
  }).then((res) => {
    data.list = res.data.data;
    data.query.page.total = res.data.total;
  })
}

onMounted(() => {
  IntoAll();
})

let currentChange = (current: any) => {
  data.query.page.current = current;
  IntoAll();
}

let btnQueryClick = () => {
  IntoAll();
}

//删除列表信息
function deleteList() {
  axios({
    url: 'http://localhost:8080/dict/deleteList',
    method: 'post',
    params: {
      dictId: data.query.dictId,
    }
  }).then((res) => {
    if (res.data.success == true) {
      successMessage("删除成功！")
    } else {
      errorMessage("删除失败,请再次尝试！")
    }
  })
}

let btnDeleteListClick = (row: any) => {
  data.query.dictId = row.dictId
  deleteList();//删除列表内容
}

//修改列表信息
function updateList() {
  axios({
    url: 'http://localhost:8080/dict/updateList',
    method: 'post',
    params: {
      dictId: data.update.dictId,
      descs: data.update.descs,
      superId: data.update.superId,
    }
  })
}

let btnUpdateListClick = (row: any) => { //获取整行信息
  data.dialogVisible = true;
  data.update.dictId = row.dictId;
  data.update.descs = row.descs;
  data.update.superId = row.superId;

}

let confirmUpdate = () => { //修改按钮
  updateList(); //修改列表信息
  data.dialogVisible = false;
}

//添加信息
let intoInsertClick = () => {
  data.dialogVisibleInsert = true;

}
//添加信息确认按钮
let confirmInsert = () => {
  axios({
    url: 'http://localhost:8080/dict/insertList',
    method: 'post',
    params: {
      dictId: data.insert.dictId,
      descs: data.insert.descs,
      superId: data.insert.superId,
    }
  }).then((res) => {
    if (res.data.success) {
      successMessage("添加成功！")
      data.dialogVisibleInsert = false;
    } else {
      errorMessage("添加失败！")
      data.dialogVisibleInsert = false;
    }
  })
}

//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}


</script>

<style scoped>

.table-head {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 20px;
  height: 70px;
  background-color: #fffefe;
  padding: 20px;
}

.goods-title {
  color: black;
  text-decoration: underline;
  text-decoration-color: coral;
  font-size: 25px;
}

.table-box {
  height: 400px;
  margin-left: 10px;
  margin-right: 20px;
  background-color: #fffefe;
}

.table-list {
  /*font-size: 17px;*/
  display: flex;
  justify-content: center;
  margin: 10px;
}

/*搜索框*/
.search-box {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 20px;
  padding: 12px 12px 12px 30px;
  height: 55px;
  background-color: #fffefe;
  font-size: 20px;
}

/*按钮群*/
.button-group {
  margin-top: 10px;
  margin-left: 10px;
}
</style>